{% extends 'base.html' %}

{% block title %}run spider{% endblock %}

{% block head %}
    <!-- <script src="//unpkg.com/vue/dist/vue.js"></script> -->
    <!-- <script src="//unpkg.com/element-ui@2.4.6/lib/index.js"></script> -->
    <!-- <link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.4.6/lib/theme-chalk/index.css"> -->

    <link rel="stylesheet" type="text/css" href="{{ static_css_element_ui_index }}">
    <style>
        #help {margin-top: 8px;}
        #help li {margin-bottom: 8px;}
        #message {
            display: none;
            margin-left: 10px;
            margin-top: 8px;
            padding-top: 8px;
            width: 700px;
        }
        #app {padding-top: 16px;}
        #cmd {
            background-color: #e3e3e3;
            cursor: not-allowed;
            opacity: 1;
        }
        #help li span{
            background: #fff;
            border: solid 1px #e1e4e5;
            color: #E74C3C;
            font-size: 90%;
            max-width: 100%;
            padding: 2px 5px;
            white-space: nowrap;
        }
        .el-select {width: 300px}
        .el-switch__core {
            background: #e3e3e3;
            border: 1px solid #e3e3e3;
        }

        .line-container .key {
            width: 188px;
        }
        #settings_arguments .el-form-item__label {color: #409EFF;}
        #time_task .el-form-item__label {color: #feb324;}
        #time_task .main_settings .el-form-item__label {color: #67c23a;}
    </style>


    <script type="text/javascript" src="{{ static_js_vue_min }}"></script>
    <script type="text/javascript" src="{{ static_js_element_ui_index }}"></script>

    {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
    <script type="text/javascript" src="{{ static_js_multinode }}"></script>
    {% endif %}
{% endblock %}


{% block body %}
<div>
    <h2 style="display: inline-block;">
        <a class="link" target="_blank" href="{{ url }}">Schedule a spider run (also known as a job), returning the job id.</a>
    </h2>
    <label title="deploy a project or add a version">
        <a class="button safe narrow" href="{{ url_deploy }}">+</a>
    </label>
    <label title="check out the history of running spiders">
        <a class="link" target="_blank" href="{{ url_schedule_history }}">history</a>
    </label>
</div>

<div class="wrap collapse-wrap">
    <ul class="collapse">
        <li>
            <div class="title">
                <h4>HELP</h4>
                <i class="iconfont icon-right"></i>
            </div>

            <ul id="help">
                <b>Run Spider</b><br><br>
                <li><span>project</span> (string, required) - the project name</li>
                <li><span>_version</span> (string, optional) - the version of the project to use, default: the latest version</li>
                <li><span>spider</span> (string, required) - the spider name</li>
                <li><span>jobid</span> (string, optional) - a job id used to identify the job, overrides the default generated UUID</li>
                <li><span>setting</span> (string, optional) - a Scrapy setting to use when running the spider.
                    (See <a class="request" target="_blank" href="https://doc.scrapy.org/en/latest/topics/settings.html">Scrapy settings</a>)
                </li>
                <li>any other parameter is passed as spider argument.
                    (See <a class="request" target="_blank" href="https://doc.scrapy.org/en/latest/topics/spiders.html#spider-arguments">Scrapy spider-arguments</a>)
                </li>
                <br>
                <b>Add Timer Task</b><br><br>
                <li>To get the local <span>timezone</span> of your host:
<pre>$ pip install tzlocal
from tzlocal import get_localzone
print(get_localzone())</pre>
                </li>
                <br>
                <li>Keep in mind that the <span>start_date</span> limit would become invalid if you select the <span>action</span> to fire the task right now.</li>
                <br>
                <li>Also note that the <span>misfire_grace_time</span> would be saved as None if it's set to 0, which means that the scheduler would reschedule the misfired task no matter how long it has been missed.</li>
                <li>Otherwise, just set <span>misfire_grace_time</span> to 1 to ignore any misfired task missed by more than 1 second.</li>
                <br>
                <li>
                    Check out <a class="request" target="_blank" href="https://apscheduler.readthedocs.io/en/latest/modules/triggers/cron.html#module-apscheduler.triggers.cron">apscheduler.triggers.cron</a>
                    and <a class="request" target="_blank" href="https://apscheduler.readthedocs.io/en/latest/modules/schedulers/base.html#apscheduler.schedulers.base.BaseScheduler.add_job">apscheduler.schedulers.base.BaseScheduler.add_job</a>
                    and <a class="request" target="_blank" href="https://apscheduler.readthedocs.io/en/latest/userguide.html#limiting-the-number-of-concurrently-executing-instances-of-a-job">userguide</a> for more info.
                </li>
            </ul>
        </li>
    </ul>
</div>


<div class="wrap" style="padding-bottom: 24px;">
    <div id="message"></div>

    <div id="app">
        <el-form id="form" :rules="rules" ref="form" :model="form" label-width="200px">

            <el-form-item label="Scrapyd server">
                <el-select id="node" v-model="form.selectedSCRAPYD_SERVER" placeholder="Select a node" @change="loadSCRAPYD_SERVERS">
                    <el-option v-for="SCRAPYD_SERVER in SCRAPYD_SERVERS" :key="SCRAPYD_SERVER" :label="SCRAPYD_SERVER" :value="SCRAPYD_SERVER"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="project" prop="selectedProject">
                <el-select id="projects" v-model="form.selectedProject" placeholder="Select a project" @visible-change="loadProjects" @change="loadVersions" no-data-text="No projects found">
                    <el-option v-for="project in projects" :key="project" :label="project" :value="project"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="_version" prop="selectedVersion">
                <el-select id="versions" v-model="form.selectedVersion" placeholder="Select a version" no-data-text="Select a project first..." @change="loadSpiders">
                    <el-option v-for="version in versions" :key="version" :label="version" :value="version"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="spider" prop="selectedSpider">
                <el-select id="spiders" v-model="form.selectedSpider" placeholder="Select a spider" no-data-text="Select a version first...">
                    <el-option v-for="spider in spiders" :key="spider" :label="spider" :value="spider"></el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="settings & arguments">
                <el-switch v-model="form.expandSettingsArguments"></el-switch>
            </el-form-item>

            <div id="settings_arguments" v-show="form.expandSettingsArguments">
                <el-form-item label="jobid">
                    <el-col :span="9">
                        <el-input v-model="form.jobid" placeholder="the job id used to identify the job" clearable></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="USER_AGENT">
                    <el-col :span="9">
                        <el-select v-model="form.USER_AGENT" placeholder="the default User-Agent for crawling" clearable>
                            <el-option :label="form.CUSTOM_USER_AGENT" value="custom"></el-option>
                            <el-option label="Mozilla/5.0 Windows NT Chrome..." value="Chrome"></el-option>
                            <el-option label="Mozilla/5.0 iPhone Safari..." value="iPhone"></el-option>
                            <el-option label="Mozilla/5.0 iPad Safari..." value="iPad"></el-option>
                            <el-option label="Mozilla/5.0 Linux; Android..." value="Android"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>

                <el-form-item label="ROBOTSTXT_OBEY">
                    <el-col :span="9">
                        <el-select v-model="form.ROBOTSTXT_OBEY" placeholder="whether to respect robots.txt policies" clearable>
                            <el-option label="True" value="True"></el-option>
                            <el-option label="False" value="False"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>

                <el-form-item label="COOKIES_ENABLED">
                    <el-col :span="9">
                        <el-select v-model="form.COOKIES_ENABLED" placeholder="whether to enable cookies middleware" clearable>
                            <el-option label="True" value="True"></el-option>
                            <el-option label="False" value="False"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>

                <el-form-item label="CONCURRENT_REQUESTS">
                    <el-col :span="9">
                        <el-input v-model="form.CONCURRENT_REQUESTS" placeholder="defaults to 16 in Scrapy" clearable></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="DOWNLOAD_DELAY">
                    <el-col :span="9">
                        <el-input v-model="form.DOWNLOAD_DELAY" placeholder="defaults to 0 in Scrapy" clearable></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="additional">
                    <el-col :span="9">
                        <el-input type="textarea" v-model="form.additional" :autosize="{ minRows: 4, maxRows: 10}" placeholder="-d setting=CLOSESPIDER_ITEMCOUNT=1 -d arg1=val1" clearable></el-input>
                    </el-col>
                </el-form-item>
            </div>


            <el-form-item label="timer task">
                <el-switch v-model="form.expandTimerTask" @change='timerTaskSwitch' active-color="#67c23a"></el-switch>
            </el-form-item>

            <div id="time_task" v-show="form.expandTimerTask">
                {% if task_id %}
                <el-form-item class="main_settings" label="target">
                    <el-col :span="9">
                        <el-select v-model="form.replace_existing" @change='timerTaskReplaceExisting'>
                            <el-option :label="`Update task #` + form.task_id" value="True"></el-option>
                            <el-option label="Save as a new task" value="False"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                {% endif %}

                <el-form-item class="main_settings" label="action">
                    <el-col :span="9">
                        <el-select v-model="form.action" @change='timerTaskAction'>
                            <el-option label="Add Task" value="add"></el-option>
                            <el-option label="Add Task & Fire Right Now" value="add_fire"></el-option>
                            <el-option label="Add Task & Pause It" value="add_pause"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item  class="main_settings" label="name">
                    <el-col :span="9">
                        <el-input v-model="form.name" placeholder="textual description of the task (optional)" clearable></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="year (*)" v-show="form.expandTimerTaskMoreSettings">
                    <el-col :span="9">
                        <el-input v-model="form.year" placeholder="4-digit year, e.g. 2019, defaults to * for any year" clearable></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="month (*)" v-show="form.expandTimerTaskMoreSettings">
                    <el-col :span="9">
                        <el-input v-model="form.month" placeholder="month (1-12); 1,6-8 equals to 1,6,7,8" clearable></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item class="main_settings" label="day (*)">
                    <el-col :span="9">
                        <el-input v-model="form.day" placeholder="day (1-31); CAN BE 1st mon OR last sun OF THE MONTH" clearable></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="week (*)" v-show="form.expandTimerTaskMoreSettings">
                    <el-col :span="9">
                        <el-input v-model="form.week" placeholder="ISO week (1-53)" clearable></el-input>
                    </el-col>
                </el-form-item>
                <!-- <el-form-item class="main_settings" label="day_of_week (*)"> -->
                    <!-- <el-col :span="9"> -->
                        <!-- <el-input v-model="form.day_of_week" placeholder="0-6 or mon,tue,wed,thu,fri,sat,sun; Use mon-fri for all workdays" clearable></el-input> -->
                    <!-- </el-col> -->
                <!-- </el-form-item> -->
                <el-form-item class="main_settings" label="day_of_week (*)">
                    <el-col :span="9">
                        <el-select v-model="form.day_of_week" placeholder="multiple select or leave blank for *" multiple>
                            <el-option
                                v-for="item in day_of_week_options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item class="main_settings" label="hour (*)">
                    <el-col :span="9">
                        <el-input v-model="form.hour" placeholder="hour (0-23); 9,17,8-20/4 equals to 8,9,12,16,17,20" clearable></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item class="main_settings" label="minute (0)">
                    <el-col :span="9">
                        <el-input v-model="form.minute" placeholder="minute (0-59); defaults to 0, type */10 to fire every 10 minutes" clearable></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="second (0)" v-show="form.expandTimerTaskMoreSettings">
                    <el-col :span="9">
                        <el-input v-model="form.second" placeholder="second (0-59); defaults to 0" clearable></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="start_date" v-show="form.expandTimerTaskMoreSettings">
                    <el-date-picker
                        v-model="form.start_date" type="datetime" placeholder="optional (inclusive)" default-time="12:00:00" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="end_date" v-show="form.expandTimerTaskMoreSettings">
                    <el-date-picker
                        v-model="form.end_date" type="datetime" placeholder="optional (inclusive)" default-time="12:00:00" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="timezone" v-show="form.expandTimerTaskMoreSettings">
                    <el-col :span="9">
                        <el-input v-model="form.timezone" :placeholder="`defaults to ` + form._timezone + `, (via: from tzlocal import get_localzone)`" clearable></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="jitter (0)" v-show="form.expandTimerTaskMoreSettings">
                    <el-col :span="9">
                        <el-input v-model="form.jitter" placeholder="execute task by random delay of [-N, +N] secs, defaults to 0." clearable></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="misfire_grace_time (600)" v-show="form.expandTimerTaskMoreSettings">
                    <el-col :span="9">
                        <el-input v-model="form.misfire_grace_time" placeholder="max tolerance of delay for misfired task, defaults to 600 secs." clearable></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="coalesce" v-show="form.expandTimerTaskMoreSettings">
                    <el-col :span="9">
                        <el-select v-model="form.coalesce">
                            <el-option label="True: default, recommended" value="True"></el-option>
                            <el-option label="False: may run more than once in succession" value="False"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="max_instances (1)" v-show="form.expandTimerTaskMoreSettings">
                    <el-col :span="9">
                        <el-input v-model="form.max_instances" placeholder="max concurrently running instances of this task, defaults to 1." clearable></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item class="main_settings" label="show more timer settings">
                    <el-switch v-model="form.expandTimerTaskMoreSettings" active-color="#feb324"></el-switch>
                </el-form-item>
            </div>


            <el-form-item label="curl command" prop="cmd">
                <el-col :span="9">
                   <el-input id="cmd" type="textarea" v-model="form.cmd" :autosize="{ minRows: 7, maxRows: 10}" readonly="readonly" placeholder="Click the 'Check CMD' button below to preview"></el-input>
                </el-col>
            </el-form-item>

        </el-form>
    </div>

    <form id="form_run_spider" method="post" action="{{ url_schedule_run }}" enctype="multipart/form-data">
        <input type="text" name="filename" hidden />
    {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
        <a class="link" style="margin-left: 200px;" href="{{ url_servers }}" target="_blank">To select nodes in the Servers page &raquo;</a>
        <div class="line-container">
            <div class="key"><span>*</span>multinodes</div>
            <input type="text" name="checked_amount" value="1" hidden />
            <div class="multiselect">
                <div class="selectBox" onclick="showCheckboxes();">
                    <div class="value">
                        <span id="selected_nodes_statement">{{ SCRAPYD_SERVERS[node-1] }}</span>
                        <svg class="icon anchor" aria-hidden="true">
                            <use xlink:href="#icon-down"></use>
                        </svg>
                    </div>
                    <div class="overSelect"></div>
                </div>
                <div id="checkboxes" style="display: none;">
                    <label for="checkCurrent"><input type="checkbox" id="checkCurrent" />Check current node only</label>
                    <label for="syncFromServersPage"><input type="checkbox" id="syncFromServersPage" />Sync from Servers page</label>
                    <label for="checkAll"><input type="checkbox" id="checkAll" />CheckAll / UncheckAll</label>
                    <div id="nodes_checkboxes">
                    {% for SCRAPYD_SERVER in SCRAPYD_SERVERS %}
                        {% if SCRAPYD_SERVERS_GROUPS[loop.index-1] and loop.changed(SCRAPYD_SERVERS_GROUPS[loop.index-1]) %}
                        <span> --- {{ SCRAPYD_SERVERS_GROUPS[loop.index-1] }} --- </span>
                        {% endif %}

                        <label id="label_{{ loop.index }}" for="checkbox_{{ loop.index }}" {% if loop.index == node %}style="color: #409EFF; font-weight: 700;"{% endif %}>
                            <input type="checkbox" id="checkbox_{{ loop.index }}" name="{{ loop.index }}"
                            {% if loop.index in selected_nodes %}checked{% endif %} />{{ SCRAPYD_SERVER }}
                        </label>
                    {% endfor %}
                    </div>
                </div>
                <div class="form-item-error">Select at least one node</div>
            </div>
        </div>
    {% endif %}
    </form>

    <div style="margin: 34px 0 16px 200px;">
        <a class="button warning big" href="javascript:;" onclick="vm.checkCMD('form');">Check CMD</a>
        <a id="run_spider" class="button safe big" href="javascript:;" onclick="runSpider('form');">Run Spider</a>
    </div>
</div>


<script>
var url_listprojects = "{{ url_listprojects }}";
var url_listversions = "{{ url_listversions }}";
var url_listspiders = "{{ url_listspiders }}";
var url_schedule_check = "{{ url_schedule_check }}";




{% if SCRAPYD_SERVERS_AMOUNT > 1 %}
//https://stackoverflow.com/questions/6463486/jquery-drop-down-menu-closing-by-clicking-outside
$(document).click(function(){
    showCheckboxes('click_outside_close');
});

$('.multiselect').click(function(e){
    e.stopPropagation();
});


// Put off
window.onload = function(){
    {% if selected_nodes == [] %}
    if (window.localStorage && JSON.parse(localStorage.getItem('nodesSelected') || "[]").length != 0) {
        var nodesSelected = JSON.parse(localStorage.getItem('nodesSelected') || "[]");
        var nodesSelected_new = [];
        for (var idx in nodesSelected) {
            try {
                var n = nodesSelected[idx];
                my$('#checkbox_'+n).checked = true;
                nodesSelected_new.push(n);
            } catch(err) {console.log(err);}
        }
    } else {
        //my$('#checkbox_'+{{ node }}).checked = true;
        my$('#checkbox_'+{{ first_selected_node }}).checked = true;
    }
    {% endif %}

    $('#checkAll').click(function () {
        $('#checkboxes input:checkbox').not(this).prop('checked', this.checked);
        my$('#checkCurrent').checked = false;
        my$('#syncFromServersPage').checked = false;
        checkCheckboxes({{ SCRAPYD_SERVERS_AMOUNT }});
    });

    $('#checkCurrent').click(function () {
        $('#checkboxes input:checkbox').not(this).prop('checked', false);
        my$('#checkCurrent').checked = true;
        my$('#checkbox_'+{{ node }}).checked = true;
        checkCheckboxes({{ SCRAPYD_SERVERS_AMOUNT }});
    });

    $('#syncFromServersPage').click(function () {
        syncFromServersPage({{ SCRAPYD_SERVERS_AMOUNT }});
    });

    $('#nodes_checkboxes input[type=checkbox]').change(function() {
        checkCheckboxes({{ SCRAPYD_SERVERS_AMOUNT }});
    });

    checkCheckboxes({{ SCRAPYD_SERVERS_AMOUNT }}); //For navigate back
}
{% endif %}


function handleMessage(message){
    if (message === undefined) {
        my$('#message').innerHTML = '';
        my$('#message').style.display = 'none';
    } else {
        my$('#message').innerHTML = message;
        my$('#message').style.display = 'block';
        my$('#message').style.border = "1px solid #f56c6c";
    }
}


function runSpider(formName){
    if (!my$('#form').cmd.value) {
        //alert("Click the 'Check CMD' button first");
        //vm.$refs[formName].validate();
        vm.$refs[formName].validate((valid) => {
            if (valid) {
                console.log('validate pass');
            } else {
                console.log('validate fail');
                vm.$refs[formName].validateField('selectedProject', (error) => {if(!error){console.log('selectedProject pass');} else {goContentTop(); return false;} });
                vm.$refs[formName].validateField('selectedVersion', (error) => {if(!error){console.log('selectedVersion pass');} else {goContentTop(); return false;} });
                vm.$refs[formName].validateField('selectedSpider', (error) => {if(!error){console.log('selectedSpider pass');} else {goContentTop(); return false;} });
                return false;
            }
        });
        return;
    }

{% if SCRAPYD_SERVERS_AMOUNT > 1 %}
    if (checked_amount == 0) {
        //alert("Select at least one node");
        checkCheckboxes({{ SCRAPYD_SERVERS_AMOUNT }});
        return;
    }
{% endif %}

    my$('#form_run_spider').submit();
    showLoader();
}


var now = new Date();
now.setMinutes(now.getMinutes()-now.getTimezoneOffset());

var Main = {
    data() {
        return {
            SCRAPYD_SERVERS:{{ SCRAPYD_SERVERS|safe }},
            //projects:["proxy","output","output1"],
            projects:[],
            versions:[],
            spiders:[],

            form: {
                selectedSCRAPYD_SERVER: "{{ SCRAPYD_SERVERS[first_selected_node-1] }}",
                selectedProject: undefined,
                selectedVersion: undefined,
                selectedSpider: undefined,

                // jobid: now.toISOString().slice(0,19).replace(/:/g, "_"),
                jobid: '{{ jobid }}',
                CUSTOM_USER_AGENT: '{{ CUSTOM_USER_AGENT }}',
                USER_AGENT: '{{ USER_AGENT }}',
                ROBOTSTXT_OBEY: '{{ ROBOTSTXT_OBEY }}',
                COOKIES_ENABLED: '{{ COOKIES_ENABLED }}',
                CONCURRENT_REQUESTS: '{{ CONCURRENT_REQUESTS }}',
                DOWNLOAD_DELAY: '{{ DOWNLOAD_DELAY }}',
                additional: '{{ additional|replace("\r\n", "CR+LF")|replace("\\", "\\\\")|replace("'", "\\'")|replace("\r", " ")|replace("\n", " ")|replace("CR+LF", "\\r\\n")|safe }}',

                task_id: {{ task_id }},
                replace_existing: '{{ replace_existing }}',
                action: '{{ action }}',
                trigger: '{{ trigger }}',
                name: '{{ name|replace("\\", "\\\\")|replace("'", "\\'")|replace("\r", " ")|replace("\n", " ")|safe }}',

                year: '{{ year }}',
                month: '{{ month }}',
                day: '{{ day }}',
                week: '{{ week }}',
                day_of_week: {{ day_of_week|safe }},  // 'mon-fri'  ['*']
                hour: '{{ hour }}',  // '9,17,8-20/4'
                minute: '{{ minute }}',  // '0'
                second: '{{ second }}',

                start_date: '{{ start_date }}',
                end_date: '{{ end_date }}',

                timezone: '{{ timezone }}',
                _timezone: '{{ timezone }}',
                jitter: {{ jitter }},  // 0
                misfire_grace_time: {{ misfire_grace_time }},  // 600
                coalesce: '{{ coalesce }}',
                max_instances: {{ max_instances }},  // 1

                cmd: undefined,
                expandSettingsArguments: {% if expand_settings_arguments %}true{% else %}false{% endif %},
                expandTimerTask: {% if expand_timer_task %}true{% else %}false{% endif %},
                expandTimerTaskMoreSettings: false,
            },
            day_of_week_options: [
                {value: '*', label: '*'},
                {value: 'mon-fri', label: 'Monday-Friday'},
                {value: 'mon', label: 'Monday'},
                {value: 'tue', label: 'Tuesday'},
                {value: 'wed', label: 'Wednesday'},
                {value: 'thu', label: 'Thursday'},
                {value: 'fri', label: 'Friday'},
                {value: 'sat', label: 'Saturday'},
                {value: 'sun', label: 'Sunday'},
            ],

            rules: {
                selectedProject: [{ required: true, message: 'project is required', trigger: 'change' }],
                selectedVersion: [{ required: true, message: 'version is required', trigger: 'change' }],
                selectedSpider: [{ required: true, message: 'spider is required', trigger: 'change' }],
                cmd: [{ required: true, message: "Click the 'Check CMD' button first", trigger: 'change' }],
            },

            timer_task_action_label_dict: {
                'add': 'Add Task',
                'add_fire': 'Add Task & Fire Right Now',
                'add_pause': 'Add Task & Pause It',
            }
        };
    },


    created() {
        // this.form.COOKIES_ENABLED = 'False';
        // this.form.action = 'add_fire';
        // this.form.coalesce = 'True';
        // {% if expand_timer_task %}
        // my$('#run_spider').text = this.timer_task_action_label_dict[this.form.action];
        // {% endif %}
        this.timerTaskSwitch(this.form.expandTimerTask);
        if (!this.form.jobid) {
            this.form.jobid = now.toISOString().slice(0,19).replace(/:/g, "_");
        }


{% if project %}
    	this.form.selectedProject = '{{ project }}';

    {% if version %}
        this.form.selectedVersion = '{{ version }}';
        this.loadSpiders();

        {% if spider %}
        this.form.selectedSpider = '{{ spider }}';
        {% endif %}

    {% else %}
        this.loadVersions();
    {% endif %}

{% endif %}
    },


    methods: {
        timerTaskSwitch(callback) {
            if (callback) {
                //my$('#run_spider').text = this.timer_task_action_label_dict[this.form.action];
                this.timerTaskAction(this.form.action);
            } else {
                my$('#run_spider').text = 'Run Spider';
            }
        },
        timerTaskReplaceExisting(callback) {
            this.timerTaskAction(this.form.action);
        },
        timerTaskAction(callback) {
            if (this.form.task_id) {
                if (this.form.replace_existing == 'True') {
                    var update_or_new = 'update';
                } else {
                    var update_or_new = 'new';
                }
                my$('#run_spider').text = "[" + update_or_new + "] "+ this.timer_task_action_label_dict[callback];
            } else {
                my$('#run_spider').text = this.timer_task_action_label_dict[callback];
            }
        },
        checkCMD(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('validate pass');
                } else {
                    console.log('validate fail');
                    return false;
                }
            });

            console.log(JSON.stringify(this.form));

            var formData = new FormData();
            if (this.form.selectedProject && this.form.selectedVersion && this.form.selectedSpider) {
                formData.append('project', this.form.selectedProject);
                formData.append('_version', this.form.selectedVersion);
                formData.append('spider', this.form.selectedSpider);
            } else {
                goContentTop();
                //alert('Select a project first');
                return;
            }

            if (this.form.expandSettingsArguments) {
                formData.append('jobid', this.form.jobid);
                formData.append('USER_AGENT', this.form.USER_AGENT);
                formData.append('ROBOTSTXT_OBEY', this.form.ROBOTSTXT_OBEY);
                formData.append('COOKIES_ENABLED', this.form.COOKIES_ENABLED);
                formData.append('CONCURRENT_REQUESTS', this.form.CONCURRENT_REQUESTS); //  || '16'
                formData.append('DOWNLOAD_DELAY', this.form.DOWNLOAD_DELAY);  //  || '0'
                formData.append('additional', this.form.additional);
            }

            if (this.form.expandTimerTask) {
                formData.append('action', this.form.action);
                formData.append('task_id', this.form.task_id);

                formData.append('trigger', this.form.trigger);
                formData.append('name', this.form.name);
                formData.append('replace_existing', this.form.replace_existing);

                formData.append('year', this.form.year);
                formData.append('month', this.form.month);
                formData.append('day', this.form.day);
                formData.append('week', this.form.week);
                formData.append('day_of_week', this.form.day_of_week);
                formData.append('hour', this.form.hour);
                formData.append('minute', this.form.minute);
                formData.append('second', this.form.second);
                formData.append('start_date', this.form.start_date || '');  // Would be null and pass 'null' after clear
                formData.append('end_date', this.form.end_date || '');  // Would be null and pass 'null' after clear

                formData.append('timezone', this.form.timezone);
                formData.append('jitter', this.form.jitter);
                formData.append('misfire_grace_time', this.form.misfire_grace_time);
                formData.append('coalesce', this.form.coalesce);
                formData.append('max_instances', this.form.max_instances);
            }

            handleMessage();
            showLoader();
            var req = new XMLHttpRequest();
            req.onreadystatechange = function() {
                if (this.readyState == 4) {
                    hideLoader();
                    if (this.status == 200) {
                        obj = JSON.parse(this.responseText);
                        my$('#form').cmd.value = obj.cmd;
                        my$('#form_run_spider').filename.value = obj.filename;
                        console.log(my$('#form_run_spider').filename.value);

                        vm.$refs[formName].clearValidate('cmd');
                    } else {
                        alert("REQUEST got code: " + this.status + ". Check out the log of ScrapydWeb.");
                    }
                }
            };
            var url_schedule_check_new = url_schedule_check.replace(/\/\d+/, '/'+(parseInt(this.SCRAPYD_SERVERS.indexOf(this.form.selectedSCRAPYD_SERVER))+1));
            req.open("post", url_schedule_check_new, Async = true);
            req.send(formData);
        },

        loadSCRAPYD_SERVERS:function(cba) {
            handleMessage();
            this.projects = [];
            this.versions = [];
            this.spiders = [];
            this.form.selectedProject = undefined;
            this.form.selectedVersion = undefined;
            this.form.selectedSpider = undefined;
        },

        //cba: visible-change callback arg, true when select options displayed, else false
        loadProjects:function(cba) {
            if (cba) {
                handleMessage();
                goContentTop();
                showLoader();
                this.projects = [];
                this.versions = [];
                this.spiders = [];
                this.form.selectedProject = undefined;
                this.form.selectedVersion = undefined;
                this.form.selectedSpider = undefined;

                //fetch("{{ url_listprojects }}")
                var url_listprojects_new = url_listprojects.replace(/\/\d+/, '/'+(parseInt(this.SCRAPYD_SERVERS.indexOf(this.form.selectedSCRAPYD_SERVER))+1));
                var req = new XMLHttpRequest();
                req.onreadystatechange = function() {
                    if (this.readyState == 4) {
                        hideLoader();
                        if (this.status == 200) {
                            var obj = JSON.parse(this.responseText);
                            if (obj.status != 'ok') {
                                //alert("REQUEST got status: "+obj.status);
                                var tip = obj.tip || '';
                                if (tip) {
                                    tip = '<h3>Tip</h3>' + tip;
                                }
                                var message = obj.message || '';
                                if (message) {
                                    obj.message = "See details below";
                                    message = '<h3>Details</h3><pre>' + message + '</pre>';
                                }
                                var text = '<pre>'+JSON.stringify(obj, null, 4)+'</pre>';
                                handleMessage(getRequestFailHtml(url_listprojects_new, 'status', obj.status)+text+tip+message);
                            } else {
                                vm.projects = obj.projects;
                                if (vm.projects.length == 0) {
                                    alert("No projects found. Check out the Projects page.");
                                }
                            }
                        } else {
                            //alert("REQUEST got code: "+this.status);
                            handleMessage(getRequestFailHtml(url_listprojects_new, 'code', this.status)+'<pre>Check out the log of ScrapydWeb.</pre>');
                        }
                    }
                };
                req.open("post", url_listprojects_new, Async = true);
                req.send();
            }
        },

        loadVersions:function() {
            handleMessage();
            goContentTop();
            showLoader();
            this.versions = [];
            this.spiders = [];
            this.form.selectedVersion = undefined;
            this.form.selectedSpider = undefined;

            //fetch("{{ url_listversions }}".replace(/PROJECT_PLACEHOLDER/, this.form.selectedProject))
            //.then(res=>res.json())
            //.then(
            //    res => {
            //        this.versions = res.versions;
            //    }
            //);
            //hideLoader();

            var url_listversions_new = url_listversions.replace(/\/\d+/, '/'+(parseInt(this.SCRAPYD_SERVERS.indexOf(this.form.selectedSCRAPYD_SERVER))+1));
            url_listversions_new = url_listversions_new.replace(/PROJECT_PLACEHOLDER/, this.form.selectedProject);
            var req = new XMLHttpRequest();
            req.onreadystatechange = function() {
                if (this.readyState == 4) {
                    hideLoader();
                    if (this.status == 200) {
                        var obj = JSON.parse(this.responseText);
                        if (obj.status != 'ok') {
                            //alert("REQUEST got status: "+obj.status);
                            var tip = obj.tip || '';
                            if (tip) {
                                tip = '<h3>Tip</h3>' + tip;
                            }
                            var message = obj.message || '';
                            if (message) {
                                obj.message = "See details below";
                                message = '<h3>Details</h3><pre>' + message + '</pre>';
                            }
                            var text = '<pre>'+JSON.stringify(obj, null, 4)+'</pre>';
                            handleMessage(getRequestFailHtml(url_listversions_new, 'status', obj.status)+text+tip+message);
                        } else {
                            vm.versions = ['default: the latest version'].concat(obj.versions);
                        }
                    } else {
                        //alert("REQUEST got code: "+this.status);
                        handleMessage(getRequestFailHtml(url_listversions_new, 'code', this.status)+'<pre>Check out the log of ScrapydWeb.</pre>');
                    }
                }
            };
            req.open("post", url_listversions_new, Async = true);
            req.send();
        },

        loadSpiders:function() {
            handleMessage();
            goContentTop();
            showLoader();
            this.spiders = [];
            this.form.selectedSpider = undefined;

            //fetch("{{ url_listspiders }}".replace(/PROJECT_PLACEHOLDER/, this.form.selectedProject).replace(/VERSION_PLACEHOLDER/, this.form.selectedVersion))
            var url_listspiders_new = url_listspiders.replace(/\/\d+/, '/'+(parseInt(this.SCRAPYD_SERVERS.indexOf(this.form.selectedSCRAPYD_SERVER))+1));
            url_listspiders_new = url_listspiders_new.replace(/PROJECT_PLACEHOLDER/, this.form.selectedProject).replace(/VERSION_PLACEHOLDER/, this.form.selectedVersion);
            var req = new XMLHttpRequest();
            req.onreadystatechange = function() {
                if (this.readyState == 4) {
                    hideLoader();
                    if (this.status == 200) {
                        var obj = JSON.parse(this.responseText);
                        if (obj.status != 'ok') {
                            //alert("REQUEST got status: "+obj.status);
                            var tip = obj.tip || '';
                            if (tip) {
                                tip = '<h3>Tip</h3>' + tip;
                            }
                            var message = obj.message || '';
                            if (message) {
                                obj.message = "See details below";
                                message = '<h3>Details</h3><pre>' + message + '</pre>';
                            }
                            var text = '<pre>'+JSON.stringify(obj, null, 4)+'</pre>';
                            handleMessage(getRequestFailHtml(url_listspiders_new, 'status', obj.status)+text+tip+message);
                        } else {
                            vm.spiders = obj.spiders;
                        }
                    } else {
                        //alert("REQUEST got code: "+this.status);
                        handleMessage(getRequestFailHtml(url_listspiders_new, 'code', this.status)+'<pre>Check out the log of ScrapydWeb.</pre>');
                    }
                }
            };
            req.open("post", url_listspiders_new, Async = true);
            req.send();
        }
    }
}
var Ctor = Vue.extend(Main);
vm = new Ctor().$mount('#app');
</script>


<script>
// handle collapse components
(function () {
    var collapse = my$('.collapse');
    var titles = my$$('.collapse .title');
    var lis = my$$('.collapse li');
    titles.forEach(function(title) {
        title.addEventListener('click', function(e){
            var index = [].indexOf.call(titles, this);
            lis[index].classList.toggle('active');
        });
    });
})();
</script>
{% endblock %}
